<template>
  <div class="hello">
    <h1>{{ msg }}<h2>5555555555</h2></h1>
    <h2 class="fz-20">Essential Links</h2>
    <div class="tip">00000000000000</div>
    <div style="margin:30px 300px">
      <Button v-on:click="onClick" type="error">确认</Button>
    </div>

  </div>
</template>

<script>
import Button from './Button.vue'
export default {
  name: 'HelloWorld',
  components:{
    Button
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
      onClick(e){
            console.log('11111111111111')
            
        },
         onClick2(e){
            console.log('==============')
            
        }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
/* h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
} */
$a:400px;
$b:200px;
@function fn($width){
  @return $width / 2;
}

//@mixin rounded-corn
.hello {
  h1{
    color:red;
    h2{
      color: yellow;
      &:hover{
        color:chartreuse;
       
      }
    }

  }
  h2{
    color: blue;
  }
  .tip{
    color: brown;
    font : {
      size: 60px;
      weight: bold;
      style:italic;
    }
    width: $a+$b;
    height: fn(500px);
    background: goldenrod;
  }
}
</style>
